HTML Basics: Preformatted text

Why preformatted text?

One of the main advantages of HTML is that it is platform and device independent. This means that no matter how wide or small your window is, the text will still fit perfectly. Also, multiple spaces or newlines can be used, but they are ignored by the browser. This allows you to write HTML source which is easy to read (using indentation to help nesting of lists and/or tables, for example), but which doesn't screw up the final presentation.

Preformatted text takes away these advantages, or so it may seem. Inside a PRE container, multiple spaces are not collapsed into one space, and newlines are only generated when they are present in the HTML source. Also, a browser should use a monospaced font to display preformatted text.

The above properties make preformatted text ideal for presenting things like ASCII art, computer programs or alternatives to tables for browsers which do not support it. In this HTML Basics series, it is most commonly used to present HTML source text for an example.

Converting text into HTML with <PRE>

It may seem that converting an ASCII text file to HTML is quite easy: just put a TITLE at the top, and surround the actual text with <PRE> and </PRE>. Unfortunately, this causes some problems.

First of all, the PRE container may contain (text-level) markup. This means that you can, for example, use emphasized text or insert form elements in a preformatted block. This offers the possibility of aligning several input fields or checkboxes on different lines very easily.

It also means that you have to convert your text file first. Any occurrence of &, < and > will have to be replaced by its corresponding entity; &, < and > respectively. Note that this must be done with & first if you use Search/Replace in your editor. Otherwise you will convert your < and > characters twice.

Second, make sure your text file contains no characters which are not in the Latin 1 character set used in HTML. These could come out differently (or not at all) on different browsers.

And lastly, make sure all lines are less than 80 or 70 characters in length. If they are longer, they will most likely not fit in a standard browser's window. This requires that a reader scroll horizontally to read each line, which many people find very annoying to do.

An example

It should be obvious by now how preformatted text works, but here is a simple application of it anyway. It's a simple textual overview of the hierarchy in this reference section. I have added hyperlinks to the three main sections. This requires some careful writing, as it means the spacing in the source and the rendered text is now different. For this reason, always create the text without markup first, and then add the hyperlinks and other elements.

Note that the source for it is presented using preformatted text itself.

<PRE>
                           HTML Reference
                           ==============

    <A HREF="./">HTML Basics</A>                   <A HREF="../">HTML 3.2</A>
        Preformatted text             Overview of elements   
        Using lists                   Alphabetical list      
        Creating tables               Structure of a document
        Writing forms

    <A HREF="../charset/">ISO Latin 1 character set</A>
</PRE>

This results in:

                           HTML Reference
                           ==============

    HTML Basics                   HTML 3.2
        Preformatted text             Overview of elements   
        Using lists                   Alphabetical list      
        Creating tables               Structure of a document
        Writing forms

    ISO Latin 1 character set

Reference index ~ HTML Basics index ~ Feedback